<!--  -->
<template>
  <div>
    <div :class="['mask']" v-if="flag" @click="$emit('closeDialog')" @touchmove.prevent></div>
    <div :class="['product-params',flag?'active':'']" @touchmove.prevent>
      <div class="clear-fix pt-16">
        <span class="float-r mr-18 close" @click="$emit('closeDialog')"></span>
      </div>
      <div class="ml-14 flex">
        <img class="product-img" :src="c_pic||initPic" alt="">
        <div class="pt-8 ml-18">
          <div class="color-red f-medium">
            <span class="f-12">￥</span>
            <span class="f-22">{{c_price}}</span>
          </div>
          <div class="mt-12 f-12 color-gray">库存{{c_stock}}件</div>
          <div class="mt-12 f-12 color-red" v-if="limit!=-1">(您还可以购买{{limit}}份)</div>
          <div class="mt-12 f-12" v-if="type=='shoppingCar'">活动进度：({{current||0}}/{{power}})</div>
          <div class="progress-wrapper mt-10" v-if="type=='shoppingCar'">
            <div class="progress" :style="{width:progress+'%'}"></div>
          </div> 
        </div>
      </div>
      <div class="flex justify-between mt-12 f-14 aligin-center pl-14 pr-14" v-if="type=='shoppingCar'">
        <span>购买数量</span>
        <van-stepper v-model="productNumber" :max="limit==-1?c_stock:limit"/>
      </div>
      <!-- <div class="percent flex"> 
        <span class="percent-item">获得活动号码{{productNumber*givePower}}</span>
        <span class="percent-item">中奖概率：{{(productNumber*givePower/power*100).toFixed(2)}}%</span>
      </div>-->
      <!-- 规格参数 -->
      <div class="option-wrapper mt-10">
        <Scroll
          :startScroll="true"
          :preventDefault="true"
          :click="false"
          :tap="true"
          :pullup="true"
          :pulldown="true"
        >
          <div>
            <template v-for="(item,index) in productOption">
              <div :key="index">
                <div class="pt-20 f-14 ml-16">{{item.spec_name}}</div>
                <div class="mt-16 flex flex-wrap">
                  <template v-for="(_item,_index) in item.value">
                    <div
                      class="params-img ml-18 flex aligin-center"
                      :class="[isSelected(_item)?'params-img-selected':'']"
                      @tap="selected(_item)"
                      v-if="_item.spec_value_data"
                      :key="_item.id"
                    >
                      <img class="params-inner-img" :src="_item.spec_value_data_src">
                      <span class="ml-12">{{_item.spec_value_name}}</span>
                    </div>
                    <span
                      v-else
                      :key="_index"
                      class="params ml-18 flex justify-center aligin-center"
                      :class="[isSelected(_item)?'params-selected':'']"
                      @tap="selected(_item)"
                    >{{_item.spec_value_name}}</span>
                  </template>
                </div>
              </div>
            </template>
          </div>
        </Scroll>
      </div>
      <div class="line-1"></div>
      <div class="flex confirm-wrap">
        <span class="confirm-btn f-18 f-medium flex justify-center aligin-center" v-if="type=='shoppingCar'&&is_norequiremoney==0&&!m_id>0&&!discount" @click="addShoppingCar">添加购物车</span>
        <span
          class="confirm-btn f-18 f-medium flex justify-center aligin-center"
          @click="submit"
        >{{type=="shoppingCar"?'确认购买':'确定'}}</span>
      </div>
    </div>
  </div>
</template>

<script>
import Scroll from "../components/Scroll";
export default {
  components: { Scroll },
  props: {
    discount:{
      type:Boolean,
      default:()=>{
        return false
      }
    },
    m_id:{
      type: Number,
      default: () => {
        return 0;
      }
    },
    is_norequiremoney:{
      type: Number,
      default: () => {
        return 0;
      }
    },
    type:{
      type:String,
      default:()=>{
        return ""
      }
    },
    power: {
      type: Number,
      default: () => {
        return 10;
      }
    },
    givePower: {
      type: Number,
      default: () => {
        return 10;
      }
    },
    initPic: {
      type: String,
      default: () => {
        return "";
      },
      required: true
    },
    sku: {
      type: Array,
      default: () => {
        return [];
      },
      required: true
    },
    limit: {
      type: Number,
      default: () => {
        return -1;
      }
    },
    productOption: {
      type: Array,
      default: () => {
        return [];
      },
      required: true
    },
    flag: {
      type: Boolean,
      default: () => {
        return false;
      },
      required: true
    },
    c_selectOption: {
      type: Array,
      default: () => {
        return [];
      },
      required: true
    },
    current: {
      type: [String,Number],
      default: () => {
        return "";
      }
    },
    progress: {
      type: String,
      default: () => {
        return "";
      }
    }
  },
  data() {
    return {
      timer: null,
      productNumber: 1
    };
  },
  computed: {
    // 选中图片
    c_pic() {
      for (let [index, item] of this.c_selectOption.entries()) {
        if (item.spec_value_data_src && item.spec_value_data) {
          return item.spec_value_data_src;
        }
      }
      return "";
    },
    // 匹配sku
    c_sku() {
      let array = this.c_selectOption.map(item => {
        return `${item.spec_id}:${item.spec_value_id};`;
      });
      let format = array.join("");
      format = format.substring(0, format.length - 1);
      return (
        this.sku.find(item => {
          return item.attr_value_items_format == format;
        }) || {}
      );
    },
    c_price() {
      let sku = this.c_sku;
      return sku.price;
    },
    c_stock() {
      let sku = this.c_sku;
      return sku.stock;
    }
  },
  watch: {},
  methods: {
    addShoppingCar(){
      this.$emit("addShoppingCar",this.productNumber, this.c_sku)
    },
    // 提交
    submit() {
      this.$emit("submit", this.productNumber, this.c_sku);
    },
    isSelected(item) {
      for (let i = 0; i < this.c_selectOption.length; i++) {
        if (
          this.c_selectOption[i].spec_id == item.spec_id &&
          this.c_selectOption[i].spec_value_id == item.spec_value_id
        ) {
         
          return true;
        }
      }
      return false;
    },
    selected(item, index) {
      this.$emit("optionSelected", item);
    }
  },
  created() {},
  mounted() {},
  updated() {}, //生命周期 - 更新之后
  destroyed() {} //生命周期 - 销毁完成
};
</script>
<style lang='less' scoped>
@import url("../assets/style/mixin"); //引入公共css类
.mask {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, 0.4);
  transition: all 0.3s ease;
  z-index: 100;
}
.color-red {
  color: #e8313a;
}
.product-params {
  position: fixed;
  bottom: 0;
  left: 0;
  overflow: hidden;
  height: 0;
  width: 100%;
  background: #fff;
  z-index: 1001;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  transition: all 0.3s ease;
  .close {
    width: 16px;
    height: 16px;
    .bg-image("../../assets/imgs/close-dialog");
    background-size: 100% 100%;
  }
  .product-img {
    width: 124px;
    height: 124px;
    border-radius: 5px;
  }
  .option-wrapper {
    height: 250px;
    overflow: hidden;
    .params {
      margin-bottom: 20px;
      min-width: 90px;
      min-height: 30px;
      background: #f5f5f5;
      border-radius: 5px;
      box-sizing: border-box;
    }
    .params-img {
      position: relative;
      margin-bottom: 20px;
      min-width: 137px;
      min-height: 30px;
      background: #f5f5f5;
      border-radius: 5px;
      box-sizing: border-box;
    }
    .params-inner-img {
      height: 24px;
      width: 24px;
      border-radius: 2px;
    }
    .params-img-selected {
      border: 1px solid #ea373f;
    }
    .params-selected {
      border: 1px solid #ea373f;
    }
    .flex-wrap {
      flex-wrap: wrap;
    }
  }
  .line-1 {
    margin: 0 15px;
    height: 1px;
    background: #f4f4f4;
  }
  .confirm-wrap {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 49px;
  }
  .confirm-btn {
    flex: 1;
    height: 100%;
    color: #fff;
    letter-spacing: 1px;
    background: linear-gradient(
      66deg,
      rgba(232, 48, 56, 1),
      rgba(247, 88, 151, 1)
    );
  }
}
.active {
  height: 567px;
}
.percent {
  padding-left: 15px;
  margin: 22px 0;
  .percent-item {
    margin-right: 31px;
    width: 120px;
    height: 30px;
    font-size: 12px;
    line-height: 30px;
    text-align: center;
    color: #e8313a;
    background: rgba(244, 244, 244, 1);
    border-radius: 5px;
  }
}
.progress-wrapper {
  position: relative;
  height: 9px;
  width: 200px;
  background: #eee;
  border-radius: 3px;
}
.color-red {
  color: #eb484e;
}
.progress {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  border-radius: 3px;
  .bg-1();
}
/*滚动条整体样式*/
.option-wrapper::-webkit-scrollbar {
  width: 3px;
  height: 1px;
}
/*滚动条滑块*/
.option-wrapper::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: rgba(254, 114, 123, 1);
}
/*滚动条轨道*/
.option-wrapper::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0);
  border-radius: 10px;
  background: #fff;
}
</style>